import React, { useRef } from 'react'
import style from './index.module.css'
import ZuoYou from './ZuoYou/index'
import ShangXia from './ShangXia/index'
import { LeftOutlined, RightOutlined } from '@ant-design/icons';
function index() {
  const sliderRef = useRef(null); // 创建一个引用来控制滚动

  const scrollLeft = () => {
    if (sliderRef.current) {
      sliderRef.current.scrollBy({
        left: -500, // 向左滚动500像素
        behavior: 'smooth'
      });
    }
  };

  const scrollRight = () => {
    if (sliderRef.current) {
      sliderRef.current.scrollBy({
        left: 500, // 向右滚动500像素
        behavior: 'smooth'
      });
    }
  };

  // 左右
  const imgsData1 = [
    { img: '/src/assets/images/单独/dong1.gif' },
    { img: '/src/assets/images/单独/zuoyou3.webp' },
    { img: '/src/assets/images/单独/zuoyou2.webp' },
    { img: '/src/assets/images/单独/10.jpg' },
  ];
  const imgsData2 = [
    { img: '/src/assets/images/单独/dong5.gif' },
    { img: '/src/assets/images/单独/2.jpg' },
    { img: '/src/assets/images/单独/3.jpg' },
    { img: '/src/assets/images/单独/4.jpg' },
  ];
  const imgsData3 = [
    { img: '/src/assets/images/单独/dong3.gif' },
    { img: '/src/assets/images/单独/5.jpg' },
    { img: '/src/assets/images/单独/6.jpg' },
    { img: '/src/assets/images/单独/7.jpg' },
  ];
  const imgsData4 = [
    { img: '/src/assets/images/单独/dong4.gif' },
    { img: '/src/assets/images/单独/8.jpg' },
    { img: '/src/assets/images/单独/9.jpg' },
    { img: '/src/assets/images/单独/11.jpg' },
  ];
  // 上下
  const imgDong1 = [
    { img: '/src/assets/images/单独/shangxia1.webp' },
  ];
  const imgDong2 = [
    { img: '/src/assets/images/单独/shangxia2.webp' }
  ];
  const imgDong3 = [
    { img: '/src/assets/images/单独/shangxia3.webp' },
  ];
  const imgDong4 = [
    { img: '/src/assets/images/单独/shangxia4.webp' }
  ];
  return (
    <div className={style.box}>
      <h1>精选模版</h1>
      <span onClick={scrollLeft} className={style.left}><LeftOutlined /></span>
      <span onClick={scrollRight} className={style.right}><RightOutlined /></span>
      <ul ref={sliderRef}>
        <li><ZuoYou TITLE="大气中国风国庆节颂赞祖国" imgsData={imgsData1}></ZuoYou></li>
        <li><ShangXia TITLE="国庆节文艺汇演节目评选" imgsData={imgDong1}></ShangXia></li>
        <li><ZuoYou TITLE="创意国庆狂欢购商场促销" imgsData={imgsData2}></ZuoYou></li>
        <li><ShangXia TITLE='国庆节中国风节日宣传祝福问候' imgsData={imgDong2}></ShangXia></li>

        <li><ZuoYou TITLE="UI合格覅苏电饭锅手机号地方" imgsData={imgsData3}></ZuoYou></li>
        <li><ShangXia TITLE="i哦未入是的呢副书记肯定VBv" imgsData={imgDong3}></ShangXia></li>
        <li><ZuoYou TITLE="发的洒水车自行车vv发额分" imgsData={imgsData4}></ZuoYou></li>
        <li><ShangXia TITLE='而且饶恕低分局发多少聚吧人呀' imgsData={imgDong4}></ShangXia></li>
      </ul>
    </div>
  )
}

export default index
